<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in list"
          :key="index"
          :label="item.value"
          :name="index"
        >
          <el-form :model="item" label-width="100px">
            <el-form-item label="标题:">
              <el-input v-model="item.systemConfigList[0].value"></el-input>
            </el-form-item>
            <el-form-item label="内容:">
              <vue-ueditor-wrap
                v-model="item.systemConfigList[1].value"
                :config="myConfig"
                @beforeInit="addCustomDialog"
                style="width: 90%"
              ></vue-ueditor-wrap>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(item)"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getAgreement, saveAgreement } from "@/api/systemadmin";
import SettingMer from "@/utils/settingMer";
import { getToken } from "@/utils/auth";
export default {
  name: "protocol",
  data() {
    const url =
      SettingMer.httpUrl + "/upload/image/0/file?ueditor=1&token=" + getToken();
    return {
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        elementPathEnabled: false,
        wordCount: false,
        enableAutoSave: false,
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: url,
        imageUrl: url,
        imageFieldName: "file",
        imageUrlPrefix: "",
        imageActionName: "upfile",
        imageMaxSize: 2048000,
        imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
      },
      activeName: 0,
      list: [],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI(
        "test-dialog",
        function (editor, uiName) {
          // 创建 dialog
          const dialog = new window.UE.ui.Dialog({
            // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
            iframeUrl: "/setting/uploadPicture?field=dialog",
            // 需要指定当前的编辑器实例
            editor: editor,
            // 指定 dialog 的名字
            name: uiName,
            // dialog 的标题
            title: "上传图片",
            // 指定 dialog 的外围样式
            cssRules: "width:1000px;height:620px;padding:20px;",
          });
          this.dialog = dialog;
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(@/assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        37
      );
    },
    getlist() {
      getAgreement()
        .then((res) => {
          console.log("获取隐私政策", res);
          this.list = res;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    submitForm(item) {
      console.log(item);
      saveAgreement(item)
        .then((res) => {
          console.log(res);
          this.$message.success("编辑成功");
          this.getlist();
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err);
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
